<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width: 300px;
            height: 300px;
            background: pink;

            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }

        .inner{
            width: 200px;
            height: 200px;
            background: gray;

            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }

        .test{
            width: 100px;
            height: 100px;
            background: black;

            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="app">
       <div class="wrap">
           <div class="inner">
               <div class="test">

               </div>
           </div>
       </div>
    </div>
</body>
<script>
    var wrap = document.querySelector(".wrap");
    var inner = document.querySelector(".inner");
    var test = document.querySelector(".test");

    //DOM0  将事件绑定在冒泡阶段; 只能给对应节点的对应事件绑定一个回调
    /*
        wrap.onclick=function () {console.log("wrap")}
        inner.onclick=function () {console.log("inner")}
        test.onclick=function () {console.log("test")}
    */


    //DOM2  false:事件绑定在冒泡阶段 ; true:事件绑定在捕获阶段
    //DOM2  能给对应节点的对应事件绑定多个回调
    wrap.addEventListener("click",function () {console.log("wrap")},false)
    wrap.addEventListener("click",function () {console.log("wrap-true")},true)
    inner.addEventListener("click",function () {console.log("inner")},false)
    inner.addEventListener("click",function () {console.log("inner-true")},true)
    test.addEventListener("click",function () {console.log("test")},false)
    test.addEventListener("click",function () {console.log("test-true")},true)
</script>
</html>